<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        div {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 内联style -->
        <div style="width:100px;height:100px;background:red;">1</div>

        <!-- v-bind:style  一般用法 =>指令值是字符串 -->
        <div :style="styleStr">2</div>

        <!-- v-bind:style   指令值是对象 -->
        <div :style="styleObj">3</div>

        <!-- v-bind:style  指令值是数组 -->
        <div :style="styleList">4</div>


        <!-- v:bind:style 指令的值可以是 字符串 对象 数组  -->

        <div :style="'width:100px;height:100px;background:red;'">5</div>
        <div :style="{ width: '100px' , height: '100px',backgroundColor: colorList[activeIndex]}">6</div>
        <div :style="[{ width: '100px'} ,{ height: '100px'},{backgroundColor: 'red'}]">7</div>

    </div>
</body>
<script>
    // 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

    // var obj = {
    //     a: 1,
    //     b: this.a + 1   // this指向window
    // }
    // console.log(obj);


    var vm = new Vue({
        el: "#app",
        data: {
            // 字符串
            styleStr: "width:100px;height:100px;background:red;",
            // 对象
            styleObj: {
                width: "100px",
                height: "100px",
                backgroundColor: "red",
            },

            // 数组
            styleList: [{
                width: "100px",
                height: "100px",
                backgroundColor: "red",
            }, {
                textAlign: "center",
                "line-height": "100px",
            }],
            colorList: ["red", "orange", "yellow"],
            activeIndex: 1,

        },
        methods: {

        }

    })



</script>

</html>